<template>
	<view class="pages">
		<view class='header'>
			<view class='header-image-1'></view>
			<view class='header-image-2'></view>
		</view>
		<view class='login-area'>
			<view class='switchWay'>
				<view class='switchWay-item switchWay-item-A' :class="{'switchWay-item-A-active':loginWayIndex==0}"
					@click="loginWayIndex=0,password='',msgCode=''">手机快捷登录</view>
				<view class='switchWay-item switchWay-item-B' :class="{'switchWay-item-B-active':loginWayIndex==1}"
					@click="loginWayIndex=1,password='',msgCode=''">账号密码登录</view>
			</view>
			<view class='inputArea'>
				<view class='inputArea-item'>
					<image src="@/static/statc-icon/image-2.png" class="input-img"></image>
					<input placeholder="请输入手机号" class='input-wrapper' type="number" maxlength="11"
						placeholder-class="placeholder" v-model="phone" />
				</view>
				<view class='inputArea-item' v-if='loginWayIndex==0'>
					<image src="@/static/statc-icon/image-1.png" class="input-img"></image>
					<input placeholder="请输入验证码" placeholder-class="placeholder" maxlength="6" v-model="msgCode" />
					<view class="code" @tap="getCode">{{text}}</view>
				</view>
				<view class='inputArea-item' v-if='loginWayIndex==1'>
					<image src="@/static/statc-icon/image-1.png" class="input-img"></image>
					<input placeholder="请输入密码" class='input-wrapper' password placeholder-class="placeholder"
						v-model="password" />
				</view>
			</view>
			<checkbox-group @change="handleChange">
				<label style="display: flex;align-items: center;text-align: center;justify-content: center;">
					<checkbox style="transform: scale(0.7)" color="#ffffff" activeBackgroundColor="#EB3B27" />
					<view class="tip">我已阅读<span @tap.stop="goUrl(1)">《用户协议》</span>和<span
							@tap.stop="goUrl(2)">《隐私政策》</span></view>
				</label>
			</checkbox-group>
			<view class='login-btn' @tap="submitLogin">
				立即登录
			</view>
			<view class="titles">还没有账号，<span @tap="goRegister">立即注册？</span></view>
		</view>
	</view>
</template>

<script>
	import {
		loginByMsgCode,
		passwordLogin,
		sendMsg
	} from '../../api/api.js'
	import md5 from '@/common/hex_md.js'
	export default {
		data() {
			return {
				text: '获取验证码',
				msgCode: '', // 验证码
				phone: '', // 手机号
				password: '', //密码
				invitationCode: '', // 邀请码
				loginWayIndex: 1,
				//判断是否勾选
				value: ''
			}
		},
		methods: {
			// 去注册
			goRegister() {
				uni.navigateTo({
					url: './registered'
				})
			},
			// goPassword() {
			// 	console.log(123)
			// 	uni.navigateTo({
			// 		url: '/pages/login/passwordLogin'
			// 	})
			// },

			// 发送验证码
			getCode() {
				// 判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					//正确-发送验证码，变化 codeText 文字
					let data = {
						phone: this.phone,
						type: 2,
						timestamp: new Date().getTime(),
						authKey: md5.hex_md5(new Date().getTime() + 'toumikuailegou2025')
					}
					sendMsg(data).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						var seconds = 60;
						this.text = seconds + 's';
						let interval = setInterval(() => {
							if (seconds > 0) {
								seconds--;
								this.text = seconds + 's'
							} else {
								this.text = '重新获取';
								clearInterval(interval)
							}
						}, 1000)
					})
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: "none"
					});
				}
			},
			goUrl(id) {
				console.log(id);
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '用户协议'
					})
				} else {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '隐私政策'
					})
				}
			},
			handleChange(e) {
				this.value = e.detail.value;
			},
			// 提交登录
			submitLogin() {
				console.log(this.value);
				if (this.value.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请阅读同意《用户协议》和《隐私政策》',
						duration: 2000
					})
				} else {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: "none"
						});
						return
					}
					if (!this.msgCode && this.loginWayIndex == 0) {
						uni.showToast({
							title: '请输入验证码',
							icon: "none"
						});
						return
					}

					if (!this.password && this.loginWayIndex == 1) {
						uni.showToast({
							title: '请输入密码',
							icon: "none"
						});
						return
					}
					let data = {
						phone: this.phone,
						msgCode: this.msgCode,
						invitationCode: this.invitationCode,
					}
					this.loginWayIndex == 0 && loginByMsgCode(data).then(res => {
						console.log(res)
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('phone', res.data.phone)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('invitationCode', res.data.invitationCode)
						uni.switchTab({
							url: '/pages/goodsIndex/index'
						})
					})

					let data1 = {
						phone: this.phone,
						password: this.password,
						invitationCode: this.invitationCode,
					}
					this.loginWayIndex == 1 && passwordLogin(data1).then(res => {
						console.log(res)
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('phone', res.data.phone)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('invitationCode', res.data.invitationCode)
						uni.switchTab({
							url: '/pages/goodsIndex/index'
						})
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.pages {
		width: 100vw;
		height: 100vh;
		background: url("@/static/static-login/image-2.png") no-repeat;
		background-size: cover;

		.header {
			width: 100vw;
			height: 442rpx;
			position: relative;

			.header-image-1 {
				width: 320rpx;
				height: 160rpx;
				background: url('@/static/static-login/txh.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 198rpx;
				left: 40rpx;
			}

			.header-image-2 {
				width: 324rpx;
				height: 276rpx;
				background: url('@/static/static-login/image-1.png') no-repeat;
				background-size: cover;
				position: absolute;
				top: 166rpx;
				right: 40rpx;
			}
		}

		.login-area {
			width: 100vw;
			height: calc(100vh - 442rpx);
			background: #FFFFFF;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.switchWay {
				display: flex;
				align-items: center;
				position: relative;

				.switchWay-item {
					width: 348rpx;
					height: 92rpx;
					position: absolute;
					font-weight: bold;
					font-size: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.switchWay-item-A {
					position: relative;
					color: #EB3B27;
					z-index: 1;
				}


				.switchWay-item-A:before {
					content: "";
					top: 0;
					left: 0;
					width: 348rpx;
					height: 92rpx;
					position: absolute;
					background: url('@/static/static-login/image-5.png') no-repeat;
					background-size: cover;
					transform: rotate(180deg);
					z-index: -1;
				}

				.switchWay-item-B {
					position: relative;
					color: #EB3B27;
					z-index: 1;
				}

				.switchWay-item-B:before {
					content: "";
					top: 0;
					left: 0;
					width: 348rpx;
					height: 92rpx;
					position: absolute;
					background: url('@/static/static-login/image-5.png') no-repeat;
					background-size: cover;
					transform: rotate(0deg);
					z-index: -1;
				}

				.switchWay-item-A-active {
					color: #FFFFFF;
				}

				.switchWay-item-B-active {
					color: #FFFFFF;
				}

				.switchWay-item-A-active:before {
					content: "";
					top: 0;
					left: 0;
					width: 348rpx;
					height: 92rpx;
					position: absolute;
					background: url('@/static/static-login/image-4.png') no-repeat;
					background-size: cover;
					transform: rotate(0deg);
					z-index: -1;
				}

				.switchWay-item-B-active:before {
					content: "";
					top: 0;
					left: 0;
					width: 348rpx;
					height: 92rpx;
					position: absolute;
					background: url('@/static/static-login/image-4.png') no-repeat;
					background-size: cover;
					transform: rotate(-180deg);
					z-index: -1;

				}
			}

			.inputArea {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;

				.inputArea-item {
					width: 670rpx;
					height: 92rpx;
					background: #F5F5F5;
					border-radius: 92rpx;
					padding: 30rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					position: relative;

					.input-img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					.input-wrapper {
						width: 100%;

					}

					input {
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1A1A1A;
					}

					.placeholder {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}

					.code {
						position: absolute;
						font-weight: 500;
						font-size: 30rpx;
						color: #EB3B27;
						top: 50%;
						transform: translateY(-50%);
						right: 24rpx;
					}

				}

				.inputArea-item:first-child {
					margin-bottom: 20rpx;
				}

				.inputArea-item:last-child {
					margin-bottom: 60rpx;
				}
			}

			.tip {
				text-align: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #ABACAD;

				span {
					color: #EB3B27;
				}
			}

			.login-btn {
				width: 670rpx;
				height: 92rpx;
				margin-top: 36rpx;
				background: #EB3B27;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 92rpx;
			}
		}

		// .title {
		// 	margin: 200rpx 0 0 60rpx;
		// 	font-size: 56rpx;
		// 	font-family: PingFangSC-Medium, PingFang SC;
		// 	font-weight: 500;
		// 	color: #1A1A1A;
		// 	line-height: 78rpx;
		// 	letter-spacing: 2rpx;
		// }
		.titles {
			margin: 32rpx auto;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;

			span {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EB3B27;
			}
		}

		// .input-content {
		// 	margin-left: 60rpx;
		// 	margin-bottom: 32rpx;
		// 	padding-left: 92rpx;
		// 	position: relative;
		// 	width: 538rpx;
		// 	height: 90rpx;
		// 	background: #F4F8FF;

		// 	.code {
		// 		position: absolute;
		// 		font-size: 26rpx;
		// 		font-family: PingFangSC-Regular, PingFang SC;
		// 		font-weight: 400;
		// 		color: #FE3B33;
		// 		top: 27rpx;
		// 		right: 24rpx;
		// 	}

		// 	.input-img {
		// 		width: 44rpx;
		// 		height: 44rpx;
		// 		top: 23rpx;
		// 		left: 24rpx;
		// 		position: absolute;
		// 	}


		// }

		// .login {
		// 	text-align: center;
		// 	margin: 80rpx 0 0 60rpx;
		// 	width: 630rpx;
		// 	height: 90rpx;
		// 	background: #FE3B33;
		// 	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.16);
		// 	border-radius: 4rpx;
		// 	font-size: 30rpx;
		// 	font-family: PingFangSC-Medium, PingFang SC;
		// 	font-weight: 500;
		// 	color: #FFFFFF;
		// 	line-height: 90rpx;
		// }

		// .tips {
		// 	margin: 32rpx 0 0 296rpx;
		// 	font-size: 26rpx;
		// 	font-family: PingFangSC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: #FE3B33;
		// 	line-height: 37rpx;
		// 	text-decoration: underline;
		// }

		// .tip {
		// 	margin: 317rpx 0 0 166rpx;
		// 	font-size: 24rpx;
		// 	font-family: PingFangSC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: #808080;
		// 	line-height: 33rpx;

		// 	span {
		// 		color: #FE3B33;
		// 	}
		// }
	}
</style>